<template>
  <div class="crossborder">
      <Swiper :banners="banners"></Swiper>
      <ul>
      </ul>
      <div
        class="pros"
        >
        <Pros :pro="pros">
        </Pros>
      </div>
  </div>
</template>

<script>
import { instance } from '@/utils/http'
import Swiper from '@/components/Swiper'
import Pros from '@/components/Pros'
export default {
  components: {
    Swiper,
    Pros
  },
  data () {
    return {
      banners: [],
      lists: [],
      pros: []
    }
  },
  computed: {
    computedLists () {
      return Json.parse(lists)
    }
  },
  created () {
    if (!this.banners.length) {
      instance.get('/appapi/home/mktBannerApp/v3?silo_id=2013000100000000004&platform_code=PLATEFORM_H5')
        .then(res => {
          this.banners = res.data.banners
        })
    }
    if (!this.pros.length) {
      instance.get('/appapi/silo/eventForH5?categoryId=lifestyle&pageIndex=1&timestamp=1586578834262&summary=300609d48db40a33427b8000a9269595&platform_code=H5')
        .then(res => {
          this.pros = res.data.eventList
        })
    }
    if (!this.lists.length) {
      instance.get('/appapi/cms/cmsDetail/v3?silo=2013000100000000004&ids=2121000100000000291&timestamp=1586578834495&summary=cddd452c1bbcc759b90ccf31664b9b23&platform_code=H5')
        .then(res => {
          this.lists = JSON.parse(res.data.resultList[0].data[0].imageJson)
          console.log(this.lists)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.crossborder {
    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 3.6rem;
        height: 2.3rem;
        margin: .1rem auto 0 auto;
        background: url("https://cdn13.mei.com/category/20180621/a789fab3fbc384262a0a542c5ae8ca0ae15d3cf3671d4998.jpg") center no-repeat;
        background-size: 100%;
        overflow: hidden;
        li {
            width: 1.44rem;
            height: .8rem;
            background: red;
        }
    }
    .pros {
        padding: .2rem .16rem;
        h4 {
        margin-bottom: .2rem;
        font-size: .2rem;
        color: black;
        }
        .go {
        position: absolute;
        top: .1rem;
        width: .48rem;
        height: .14rem;
        font-size: .12rem;
        color: #000;
        line-height: .14rem;
        background: #fff;
        }
    }
}
</style>
